<template>
  <div class="rank">
    <ul class="list">
      <template v-if="type === 'QTSR'">
        <li>
          <span style="color: rgba(42, 130, 228, 1)">总实收</span>
          <span >{{ propsData[0].ZSS | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年其他租赁</span>
          <span >{{ propsData[0].BN_QTZL | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年停车场收费</span>
          <span >{{ propsData[0].BN_TCCSF | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年场地费</span>
          <span >{{ propsData[0].BN_CDF | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年对外服务</span>
          <span >{{ propsData[0].BN_DWFW | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年驾校培训费</span>
          <span >{{ propsData[0].BN_JXPXF | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年检测站检测费</span>
          <span >{{ propsData[0].BN_JCZJC | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年保养厂维修费</span>
          <span >{{ propsData[0].BN_BYCWX | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年其他收入</span>
          <span >{{ propsData[0].BN_QTSR | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
      </template>
      <template v-else>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">总实收</span>
          <span >{{ propsData[0].ZSS | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本月应收</span>
          <span >{{ propsData[0].BYYS | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本月实收</span>
          <span >{{ propsData[0].BYSS | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本月欠款</span>
          <span >{{ propsData[0].BYQK | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年应收</span>
          <span >{{ propsData[0].BNYS | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年实收</span>
          <span >{{ propsData[0].BNSS | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">本年欠款</span>
          <span >{{ propsData[0].BNQK | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
        <li>
          <span style="color: rgba(42, 130, 228, 1)">累计欠款</span>
          <span >{{ propsData[0].LJQK | retain }}<span class="m-l-10" style="color: rgba(42, 130, 228, 1)">元</span></span>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'RankList',
  props: {
    type: {
      type: String,
      default: ''
    },
    propsData: {
      type: Array,
      default: null
    }
  }
}
</script>

<style lang="less" scoped>

  .rank {
    padding: 0 32px 32px 72px;

    .list {
      margin: 25px 0 0;
      padding: 0;
      list-style: none;

      li {
        margin-top: 16px;

        span {
          color: rgba(0, 0, 0, .65);
          font-size: 14px;
          line-height: 22px;

          // &:first-child {
          //   background-color: #f5f5f5;
          //   border-radius: 20px;
          //   display: inline-block;
          //   font-size: 12px;
          //   font-weight: 600;
          //   margin-right: 24px;
          //   height: 20px;
          //   line-height: 20px;
          //   width: 20px;
          //   text-align: center;
          // }
          &.active {
            background-color: #314659;
            color: #fff;
          }
          &:last-child {
            float: right;
          }
        }
      }
    }
  }

  .mobile .rank {
    padding: 0 32px 32px 32px;
  }

</style>
